import { Input, Select, type TableColumnType } from '@/components/base';
import * as apis from '@shared/apis';
import type { IPageFilterProps } from '@/components/page-filter';
import dayjs from 'dayjs';

/** 表格配置 */
export const columns: TableColumnType[] = [
    {
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
        width: 100,
    },
    {
        title: '昵称',
        dataIndex: 'nickname',
        key: 'nickname',
        width: 100,
    },
    {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
        width: 180,
    },
    {
        title: '手机',
        dataIndex: 'phone',
        key: 'phone',
        width: 120,
    },
    {
        title: '启用状态',
        dataIndex: 'enabledStatus',
        key: 'enabledStatus',
        width: 70,
        render: (text) => {
            return apis.users.EnabledStatusMap[text as apis.users.EnabledStatusEnum] || text;
        }
    },
    {
        title: '创建时间',
        dataIndex: 'createdAt',
        key: 'createdAt',
        ellipsis: true,
        width: 70,
        render: (e) => {
            return e ? dayjs(e).format('YYYY-MM-DD') : '';
        }
    },
    {
        title: '更新时间',
        dataIndex: 'updatedAt',
        key: 'updatedAt',
        ellipsis: true,
        width: 70,
        render: (e) => {
            return e ? dayjs(e).format('YYYY-MM-DD') : '';
        }
    },
    {
        title: '备注',
        dataIndex: 'remarks',
        key: 'remarks',
        width: 600,
    }
].map((item) => {
    return {
        ...item,
        sorter: true,
    };
})

/** 筛选配置 */
export const filterProps: IPageFilterProps<any> = {
    formFlex: 60,
    items: [
        {
            label: '用户名',
            name: 'username',
            rules: [{ max: 30 }],
            children: <Input placeholder='请输入用户名' />
        },
        {
            label: '昵称',
            name: 'nickname',
            children: <Input placeholder='请输入昵称' />
        },
        {
            label: '邮箱',
            name: 'email',
            children: <Input placeholder='请输入邮箱' />
        },
        {
            label: '状态',
            name: 'enabledStatus',
            children: <Select
                allowClear
                options={Array.from(Object.entries(apis.users.EnabledStatusMap)).map(([value, label]) => ({ value, label }))}
                placeholder='请选择状态'
            />
        },
    ]
}